import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:xingsu/page/mine/theme_page.dart';
import 'package:xingsu/page/mine/video_status_parent_page.dart';
import 'package:xingsu/page/mine/viewModel/mine_viewmodel.dart';
import 'package:xingsu/page/set/set_page.dart';
import 'package:xingsu/page/user/edit_userinfo_page.dart';
import 'package:xingsu/page/user/login_page.dart';
import 'package:xingsu/page/user/user_manager_page.dart';
import 'package:xingsu/util/image_util.dart';
import 'package:get/get.dart';
import 'package:xingsu/util/use_preferences.dart';

import '../../res/colors.dart';
import 'about_page.dart';

class MinePage extends StatefulWidget {
  const MinePage({Key? key}) : super(key: key);

  @override
  State<MinePage> createState() => _MinePageState();
}

class _MinePageState extends State<MinePage>
    with AutomaticKeepAliveClientMixin {
  final MineViewModel _viewModel = Get.put(MineViewModel());

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
        appBar: AppBar(
          title: const Text("我的"),
          // actions: [
          //   IconButton(
          //       onPressed: () {
          //         Get.to(() => SetPage());
          //       },
          //       icon: const Icon(Icons.settings))
          // ],
        ),
        body: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 15),
          children: [
            _topWidget(),
            const SizedBox(
              height: 20,
            ),
            _balanceWidget(),
            const SizedBox(
              height: 20,
            ),
            _progressWidget(),
            const SizedBox(
              height: 20,
            ),
            _btmWidget()
          ],
        ));
  }

  Widget _topWidget() {
    return Obx(() => Row(
          children: [
            Expanded(
                child: Row(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: InkWell(
                    onTap: () {
                      if (!UserPreferences.getIsLogin()) {
                        Get.to(() => LoginPage());
                      }
                    },
                    child: _viewModel.isLogin.value
                        ? loadNetworkImage(
                            "https://img0.baidu.com/it/u=1217304799,3113310756&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1673629200&t=038eb03edf5898fbb7802625c5611215",
                            width: 80)
                        : loadAssetImage("avatar", width: 80),
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                _viewModel.isLogin.value
                    ? Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: const [
                          Text(
                            "昵称：卡卡林",
                            style: TextStyle(fontSize: 13, color: Colors.grey),
                          ),
                          Text("抖游号：100283",
                              style:
                                  TextStyle(fontSize: 13, color: Colors.grey))
                        ],
                      )
                    : const Text(
                        "未登录",
                        style: TextStyle(color: Colors.grey),
                      )
              ],
            )),
            _viewModel.isLogin.value
                ? InkWell(
                    onTap: () {
                      Get.to(() => EditUserInfoPage());
                    },
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 5),
                      child: Row(
                        children: const [
                          Text("编辑资料"),
                          Icon(Icons.arrow_right_outlined)
                        ],
                      ),
                    ),
                  )
                : const SizedBox()
          ],
        ));
  }

  Widget _btmWidget() {
    bool isDark = context.isDarkMode;
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10),
      decoration: BoxDecoration(
          color: isDark ? Colours.dark_material_bg : Colours.bg_gray,
          borderRadius: BorderRadius.circular(5)),
      child: Column(
        children: [
          Obx(() => _itemWidget("清除缓存",
              desc: _viewModel.cache.value, callback: _viewModel.clearCache)),
          Obx(() => _itemWidget("暗黑模式", desc: _viewModel.themeMode.value,
                  callback: () {
                Get.to(() => ThemePage());
              })),
          Obx(() => _viewModel.isLogin.value
              ? _itemWidget("用户管理", desc: "", callback: () {
                  Get.to(() => UserManagerPage());
                })
              : const SizedBox()),
          _itemWidget("关于APP", callback: () {
            Get.to(() => AboutPage());
          })
        ],
      ),
    );
  }

  Widget _itemWidget(String title, {String desc = "", VoidCallback? callback}) {
    return InkWell(
      onTap: callback,
      child: Container(
        height: 50,
        alignment: Alignment.centerLeft,
        margin: const EdgeInsets.symmetric(horizontal: 15),
        decoration: BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    color: Theme.of(context).dividerTheme.color!, width: 0.8))),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
            ),
            const Spacer(),
            Text(
              desc,
              style: const TextStyle(color: Colours.grayColor, fontSize: 12),
            ),
            const SizedBox(
              width: 10,
            ),
            loadAssetImage("arrow_right", width: 13)
          ],
        ),
      ),
    );
  }

  Widget _balanceWidget() {
    bool isDark = context.isDarkMode;

    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      decoration: BoxDecoration(
          color: isDark ? Colours.dark_material_bg : Colours.bg_gray,
          borderRadius: BorderRadius.circular(5)),
      child: Row(
        children: [
          Expanded(
              child: Row(
            children: [
              _balanceItemWidget("账户余额"),
              _balanceItemWidget("今日收益"),
              _balanceItemWidget("待结算收益"),
            ],
          )),
          const SizedBox(
            width: 10,
          ),
          InkWell(
            onTap: () {
              if (UserPreferences.getIsLogin()) {
                Fluttertoast.showToast(msg: "余额为0");
              } else {
                Get.to(() => LoginPage());
              }
            },
            child: Container(
              height: 30,
              width: 55,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colours.app_main,
                  borderRadius: BorderRadius.circular(15)),
              child: const Text(
                "提现",
                style: TextStyle(color: Colors.white,fontSize: 13),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _balanceItemWidget(String title) {
    return Expanded(
        child: Column(
      children: [
        Text(
          title,
          style: const TextStyle(fontSize: 14),
        ),
        const SizedBox(
          height: 5,
        ),
        const Text(
          "￥0.00",
          style: TextStyle(fontSize: 12, color: Colours.grayColor),
        )
      ],
    ));
  }

  Widget _progressWidget() {
    bool isDark = context.isDarkMode;
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      decoration: BoxDecoration(
          color: isDark ? Colours.dark_material_bg : Colours.bg_gray,
          borderRadius: BorderRadius.circular(5)),
      child: Wrap(
        children: [
          _progressItemWidget(0, "全部", Icons.all_out_sharp),
          _progressItemWidget(1, "待审核", Icons.access_time_outlined),
          _progressItemWidget(2, "已审核", Icons.done_all_sharp),
          _progressItemWidget(3, "无效视频", Icons.error_outline),
        ],
      ),
    );
  }

  Widget _progressItemWidget(int index, String title, IconData icon) {
    bool isDark = context.isDarkMode;
    return InkWell(
      onTap: () {
        if (UserPreferences.getIsLogin()) {
          Get.to(() => VideoStatusParentPage(index));
        } else {
          Get.to(() => LoginPage());
        }
      },
      child: Container(
        alignment: Alignment.center,
        width: ((Get.width - 30) / 4.0).floorToDouble(),
        child: Column(
          children: [
            Icon(
              icon,
              size: 23,
              color: isDark ? Colors.white : Colours.textColor,
            ),
            const SizedBox(
              height: 10,
            ),
            Text(
              title,
              style: const TextStyle(fontSize: 13, color: Colours.grayColor),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
